<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜</title>
    <style>
     *{
         margin: 0;
         padding: 0;
     }
     .main_view{
         position: relative;
         width: 400px;
         height: 400px;
         border: 2px solid slateblue;
         float: left;
     }
     .main_view:hover{
         cursor: move;
     }
     .main_img{
         width: 100%;
         height: 100%;

     }
     .main_img img {
         width: 100%;
         height: 100%;
     }
     .mask{
         width: 200px;
         height: 200px;
         background-color: rgb(255,255,150,.3);
         position: absolute;
         left: 0;
         top: 0;
         display: none;
     }
     .preview{
         width: 400px;
         height: 400px;
         margin-left: 30px;
         border: 2px solid sandybrown;
         float: left;
         overflow: hidden;
         display: none;
     }
     .preview_img{
         width: 200%;
         height: 200%;
     }
     .preview_img img{
         width: 100%;
         height: 100%;
     }
    </style>
</head>
<body>
    <!-- 主视图 -->
    <div class="main_view">
        <div class="main_img">
            <img src="./86ed64faab5f3308.jpg" alt="">
        </div>
        <div class="mask"></div>
    </div>
    <!-- 右边放大视图 -->
    <div class="preview">
        <div class="preview_img">
            <img src="./86ed64faab5f3308.jpg" alt="">
        </div>
    </div>
    <script>
     // 获取元素
     let mainBox = document.querySelector('.main_view')
     let mask = document.querySelector('.mask')
     let preview =document.querySelector('.preview')
     let img =document.querySelector('.preview_img')
   // 添加主视图鼠标进入事件监听 并且显示遮罩层和右放大视图
    mainBox.addEventListener('mouseenter',function () {
        mask.style.display = 'block'
        preview.style.display = 'block'
    })
     // 添加主视图鼠标移除事件监听 并且隐藏遮罩层和右放大视图
    mainBox.addEventListener('mouseleave',function () {
        mask.style.display = ''
        preview.style.display = ''
    })
    //添加鼠标移动事件监听
    mainBox.addEventListener('mousemove',function (e) {
      // 主视图左边到鼠标的距离 鼠标在遮罩层中心 所以减去遮罩层宽度一半
     let x = e.pageX - mainBox.offsetLeft - mask.offsetWidth/2
     let y = e.pageY - mainBox.offsetTop - mask.offsetHeight/2
   
     //遮罩层在主视图里移动到的最大距离
     let maskMaxWidth = mainBox.clientWidth -mask.clientWidth
     let maskMaxHeight =mainBox.clientHeight - mask.clientHeight
     

  // 判断遮罩层移动边界条件
  x < 0 && (x = 0)
  y < 0 && (y = 0)
  x > maskMaxWidth && (x = maskMaxWidth)
  y > maskMaxHeight && (y = maskMaxHeight)

  // 通过发现遮罩层的移动距离的最大移动距离的比例等于左边放大图同样的比例相等
  //求出左边图片的最大移动距离
 let imgMaxWidth = img.clientWidth - preview.clientWidth
 let imgMaxHeight = img.clientHeight - preview.clientHeight

 // 通过比例关系 求出左边放大图的移动距离
  let imgXmove=(x*imgMaxWidth)/maskMaxWidth
  let imgYmove= (y*imgMaxHeight)/maskMaxHeight
 
   mask.style.left = x +'px'
   mask.style.top = y + 'px'
   img.style.transform =`translate(-${imgXmove}px, -${imgYmove}px)`
    })

    </script>
</body>
</html>